<template>
  <div>
    <el-card class="card_bg" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="text-14 text-white-50">设备名称</span>
          <!-- <el-button type="warning" @click="onEdit" v-if="switchList.length!=0&&isBaoxiu" round size="small">报修</el-button> -->
        </div>
      </template>
      <el-row v-for="(item, index) in switchList" :key="index" class="plr-2 ptb-2">
        <template v-if="item.buttonType == 4">
          <el-row class="mt-3 w100">
            <el-col :span="12" class="t-l pr-1">
              <el-button type="primary" class="w100 rounded-2" plain @click="dds(item, 2)">上课</el-button>
            </el-col>
            <el-col :span="12" class="t-r pl-1">
              <el-button type="primary" class="w100 rounded-2" plain @click="dds(item, 1)">下课</el-button>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <el-col :span="10" class="text-14 t-l">
            <img v-if="item.type != 0" :src="`./images/equi/${getPng(item)}.png`" style="vertical-align: middle;" width="15"
              class="m-1" alt />
            {{ item.equipmentName }}
          </el-col>
          <el-col :span="14" class="t-r">
            <el-switch inline-prompt v-if="item.buttonType == 1" class="switch" v-model="item.value" :active-value="1"
              :inactive-value="0" active-text="开" inactive-text="关" @change="dd(item)"></el-switch>
            <template v-if="item.buttonType == 2">
              <el-radio-group size="small" v-model="item.value" @change="dd(item)">
                <el-radio-button label="1">开始</el-radio-button>
                <el-radio-button label="2">暂停</el-radio-button>
                <el-radio-button label="0">停止</el-radio-button>
              </el-radio-group>
            </template>
            <template v-if="item.buttonType == 5">
              <el-button size="small" plain type="primary" @click="remoteControl(item, 2)">制冷</el-button>
              <el-button size="small" plain type="primary" @click="remoteControl(item, 1)">制热</el-button>
            </template>
            <template v-if="item.buttonType == 7">
              <el-button size="small" plain type="primary" @click="remoteControl(item, 1)">关闭</el-button>
            </template>
            <template v-if="item.buttonType == 6">
              <el-button size="small" plain type="primary" @click="remoteControl(item, 1)">音量-</el-button>
              <el-button size="small" plain type="primary" @click="remoteControl(item, 2)">音量+</el-button>
            </template>
          </el-col>
        </template>
      </el-row>
    </el-card>
    <WorkerorderDialog ref="workerorderRef" @success="roomFetch()"></WorkerorderDialog>
  </div>
</template>

<script setup>
/**
 * 面板控制
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { ElLoading } from 'element-plus'
import { getNewObj } from '@/utils/EsCommon';
import Pagination from '@/components/pagination/index.vue';
import WorkerorderDialog from './WorkerorderDialog.vue';
import { useWebSocketStore } from '@/stores/useWebSocketStore';
const socketStore = useWebSocketStore();




const props = defineProps({
  //是否报修
  isBaoxiu: {
    type: Boolean,
    default: true
  },
  roomData: {
    type: Object,
    default() {
      return {}
    }
  }
})
// ======================================================
//                      变量声明
// ======================================================
const emit = defineEmits(['roomFetch']);

// 组件引用
const workerorderRef = ref(null);
// 表格数据

// 表格多选数据
const switchList = ref([]);

// 点击行内编辑按钮
const onEdit = () => {
  workerorderRef.value.show("报修 ", props.roomData);
}

// 获取设备图片
const getPng = (items) => {
  let _index = ''
  switch (items.status) {
    case "0":
      _index = `${items.type}`
      break;
    case "-1":
      _index = `${items.type}-1`
      break;
    case "1":
      _index = `${items.type}-2`
      break;
    default:
      _index = `${items.type}`
      break;
  }
  return _index
}

// ======================================================
//                      处理事件
// ======================================================
const roomFetch = () => {
  switchList.value = []
  emit('roomFetch')
}
//ws刷新前id记录
const getRoomJoinnum = (id, isClear = true) => {
  if (isClear) switchList.value = []
  // const loadingInstance = ElLoading.service({ text: '查询中...' })
  EsAjax.post(ApiUrls.roomJoinnumlist, { id: id }).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    console.log(res.data.data)
    let { data } = res.data
    let _list = []
    if (data && data.length) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].valueType == 2) {
          _list.push({
            id: data[i].id,
            equipmentName: data[i].equipmentName,
            equipmentType: data[i].equipmentType,
            group: data[i].group,
            joinNum: data[i].joinNum,
            name: data[i].name,
            roomId: data[i].roomId,
            value: Number(data[i].value),
            valueType: data[i].valueType,
            joinnumType: data[i].joinnumType,
            buttonType: data[i].buttonType,
            type: data[i].equipmentType,
            status: '',

          });
        }
      }
      switchList.value = _list
    }




  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    // loadingInstance.close()
  })
}

const dd = (e) => {
  var data = {
    id: e.id,
    roomId: e.roomId,
    joinNum: e.joinNum,
    value: Number(e.value) + 1,
  };
  handelControl(data)
}

const remoteControl = (e, value) => {
  var data = {
    id: e.id,
    roomId: e.roomId,
    joinNum: e.joinNum,
    value: value,
  };
  handelControl(data)
}

// 开关控制
const handelControl = (data) => {
  const loadingInstance = ElLoading.service({ text: '处理中...' })
  EsAjax.post(ApiUrls.remoteControl, data).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loadingInstance.close()
  })
}
/**
 * 2 上课 1 下课
 */
const dds = (e, value) => {
  var data = {
    id: e.id,
    roomId: e.roomId,
    joinNum: e.joinNum,
    value: value,
  };
  let text = value == '2' ? '上课' : '下课'
  const loadingInstance = ElLoading.service({ text: text + '中...' })
  EsAjax.post(ApiUrls.remoteControl, data).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(text + '失败！');
      return;
    }
    ElMessage.success(text + '成功！');
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loadingInstance.close()
  })



}

defineExpose({
  getRoomJoinnum
})

</script>
<style lang="less" scoped>
:deep(.el-button--small) {
  padding: 5px 6px;
}

:deep(.el-button--primary.is-plain) {
  border: none;
  color: #0db895;
  background: rgba(13, 184, 149, 0.1);
}

.tag {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 5px;
}

.typeIcon {
  width: 33px;
  height: 33px;
  display: inline-block;

  &.sm {
    width: 15px !important;
    height: 15px !important;
  }
}

:deep(.el-card__header) {
  padding-left: 20px;
  position: relative;
}

.smallHeight {
  height: 220px;
  box-sizing: border-box;
  border-radius: 5px;

  .typeIcon {
    width: 22px;
    height: 22px;
  }
}

.bigHeight {
  height: 250px;
  box-sizing: border-box;
  border-radius: 5px;

  :deep(.el-card__header) {
    padding: 20px;
  }

  .tag {
    top: 13px;
  }
}

.checkBorder {
  border: 2px solid #0db895 !important;
}

.online {
  .tag {
    background: url("@/assets/img/room/online-tag.png") no-repeat;
    background-size: 100%;
  }

  :deep(.el-card__header) {
    background: linear-gradient(90deg,
        rgba(15, 209, 169, 6) 0%,
        rgba(15, 209, 169, 0) 100%);
    border-bottom: 4px solid;
    border-image-source: linear-gradient(90deg,
        #0fd1a9 0%,
        rgba(15, 209, 169, 0) 100%);
    border-image-slice: 1;
  }
}

.fault {
  .tag {
    background: url("@/assets/img/room/fault-tag.png") no-repeat;
    background-size: 100%;
  }

  :deep(.el-card__header) {
    background: linear-gradient(90deg,
        rgba(255, 187, 0, 0.6) 0%,
        rgba(255, 187, 0, 0) 100%);
    border-bottom: 4px solid;
    border-image-source: linear-gradient(90deg,
        #ffbb00 0%,
        rgba(255, 187, 0, 0) 100%);
    border-image-slice: 1;
  }
}

.offline {
  .tag {
    background: url("@/assets/img/room/offline-tag.png") no-repeat;
    background-size: 100%;
  }

  :deep(.el-card__header) {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
    border-bottom: 4px solid;
    border-image-source: linear-gradient(90deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%) !important;
    border-image-slice: 1;
  }
}

:deep(.el-radio-button__inner) {
  background: transparent;
  color: #fff;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #0db895;
  background: rgba(13, 184, 149, 0.1);
  border-color: #0db895;
}

:deep(.el-card__body) {
  min-height: 80px;
}

.detail {
  width: 40px;
}</style>
  
